<template>
  <div class="publish-button global-display global-j-end">
    <van-button type="success" size="small" :disabled="false">发布</van-button>
  </div>
  <van-field
    class="input-size"
    v-model="title"
    maxlength="30"
    size="large"
    placeholder="好的标题更容易被推荐(必填)"
  />
  <van-field
    class="input-size"
    v-model="content"
    rows="6"
    autosize
    size="large"
    type="textarea"
    placeholder="分享有趣或想吐槽的经历,帮助更多热爱旅行的人(必填)"
    @blur="blurEvent"
  />
  <div class="upload-img">
    <van-uploader
      v-model="fileList"
      max-count="6"
      multiple
      accept=".jpg,.jpeg,.png,.webp,.jfif"
      :before-delete="beforeDelete"
    />
  </div>
  <div class="location-view">
    <van-divider />
    <div class="address global-display global-a-items" @click="mapShow = true">
      <p>你在哪里</p>
      <p class="text-show">北京市</p>
      <van-icon name="arrow" color="#919191" size="20" />
    </div>
  </div>
  <!-- 已添加的标签 -->
  <div class="location-view" v-if="true">
    <p class="tag-Text">还可添加5个标签</p>
    <van-tag
      class="vanTag"
      v-for="(item, index) in 1"
      color="#ec6f97"
      closeable
      round
      size="medium"
      type="primary"
      @close="close(index, item)"
    >
      北京
    </van-tag>
  </div>
  <!-- 选择标签 -->
  <div class="location-view">
    <p class="tag-Text">推荐标签</p>
    <van-tag
      class="vanTag"
      v-for="(item, index) in 5"
      color="#f3f4f6"
      text-color="#000000"
      round
      size="medium"
      type="primary"
      @click="addTag(item)"
    >
      长沙
    </van-tag>
    <van-tag
      color="#ec6f97"
      plain
      round
      size="medium"
      type="primary"
      @click="tagTrue = true"
    >
      + 自定义标签
    </van-tag>
  </div>
  <!-- 自定义标签弹窗 -->
  <van-dialog
    :show="tagTrue"
    title="自定义标签"
    show-cancel-button
    @confirm="tagConfirm"
    @cancel="tagTrue = false"
  >
    <van-field
      size="large"
      placeholder="请输入自定义标签"
      autofocus
      v-model="customTag"
    />
  </van-dialog>
  <!-- 地图选点 -->
  <van-popup v-model:show="mapShow" position="bottom">
    <iframe id="mapPage" frameborder="0" :src="mapUrl"> </iframe>
  </van-popup>
  <div style="height: 300px"></div>
  <tabbar />
</template>

<script setup>
import tabbar from "@/components/tabbar/index.vue";
import { ref, watch, watchEffect } from "vue";
import { LBS_KEY } from "@/api/my-account.js";
const mapUrl = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&&key=${LBS_KEY}&referer=myapp`;
const title = ref("");
const content = ref("");
const blurEvent = () => {
  console.log("失去焦点");
};
// 推荐标签
const recLabel = ref([]);
// 我选中的标签
const myLabel = ref([]);
// 设置可以添加几个标签
const numberTags = ref(10);
// 自定义标签
const customTag = ref("");
// 自定义标签弹窗:显示||隐藏
const tagTrue = ref(false);
// 是否显示地图
const mapShow = ref(false);

//添加tag
const addTag = () => {};
</script>

<style>
:root:root {
  --van-uploader-size: 100px;
  --van-uploader-icon-color: #5e5f63;
  --van-uploader-upload-background: #f3f4f6;
  --van-tag-medium-padding: 5px 10px;
  --van-button-small-padding: 10px 30px;
  --van-button-small-font-size: 16px;
}
.publish-button {
  padding: 10px;
}
.input-size {
  font-size: 17px;
}
.upload-img {
  padding: 10px 0 0 10px;
}
.location-view {
  padding: 10px;
}
.address {
  font-weight: bold;
}
.address img {
  width: 20px;
  height: 20px;
}
.address p:nth-child(2) {
  flex: 1;
  padding: 0 20px;
  color: #ffd01e;
}
.vanTag {
  margin-right: 5px;
}
.tag-Text {
  color: #bbbbbb;
  padding-bottom: 10px;
  font-weight: bold;
}
#mapPage {
  width: 100%;
  height: 100vh;
}
</style>
